<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="modal_box_css/border_css.css">
        <link rel="stylesheet" href="modal_box_css/border_left_css.css">
        <link rel="stylesheet" href="modal_box_css/border_right_css.css">
    </head>
    <body>
        <button id="btn_id">点击打开界面</button>
        <div id="border"><!--全局-->
            <div id="border_left"><!--左侧全局-->
                <div id="search">
                    <input type="search" placeholder="请输入">
                    <p>+</p>
                </div>
                <div id="single1" class="single">
                    <div class="single_left">
                        <img src="images/1.jpg" class="single_img">
                    </div>
                    <div class="single_right">
                        <p>python0831</p>
                    </div>

                </div>
                <div id="single2" class="single">
                    <div class="single_left">
                        <img src="images/1.jpg" class="single_img">
                    </div>
                    <div class="single_right">
                        <p>python0831</p>
                    </div>

                </div>
                <div id="single3" class="single">
                    <div class="single_left">
                        <img src="images/1.jpg" class="single_img">
                    </div>
                    <div class="single_right">
                        <p>python0831</p>
                    </div>

                </div>
                <div id="single4" class="single">
                    <div class="single_left">
                        <img src="images/1.jpg" class="single_img">
                    </div>
                    <div class="single_right">
                        <p>python0831</p>
                    </div>

                </div>
                <div id="single5" class="single">
                    <div class="single_left">
                        <img src="images/1.jpg" class="single_img">
                    </div>
                    <div class="single_right">
                        <p>python0831</p>
                    </div>

                </div>
                <div id="single6" class="single">
                    <div class="single_left">
                        <img src="images/1.jpg" class="single_img">
                    </div>
                    <div class="single_right">
                        <p>python0831</p>
                    </div>

                </div>
                <div id="single7" class="single">
                    <div class="single_left">
                        <img src="images/1.jpg" class="single_img">
                    </div>
                    <div class="single_right">
                        <p>python0831</p>
                    </div>

                </div>
                <div id="single8" class="single">
                    <div class="single_left">
                        <img src="images/1.jpg" class="single_img">
                    </div>
                    <div class="single_right">
                        <p>python0831</p>
                    </div>

                </div>
                <div id="single9" class="single">
                    <div class="single_left">
                        <img src="images/1.jpg" class="single_img">
                    </div>
                    <div class="single_right">
                        <p>python0831</p>
                    </div>
                </div>
            </div>
            <div id="border_right"><!--右侧全局-->
                <div class="border_icon"><!--顶部图标-->
                    <p class="exit">×</p>
                    <p>□</p>
                    <p>-</p>
                    <p>┳</p>
                </div>
                <div id="chat1" class="chat"><!--聊天全局-->
                    <div class="chat_top"><!--聊天顶部-->
                    <p id="chat_name" class="chat_name">python0831</p><!--聊天名字-->
                        <p id="ing" class="ing"></p>
                    </div>
                    <div class="chat_content"><!--聊天内容-->
                        <div class="other">
                            <div><img class="img" src="images/1.jpg"></div>
                            <div><span class="neirong">在吗?</span></div>
                        </div>
                        <div class="me">
                            <div><img class="img" src="images/2.jpg"></div>
                            <div class="span_div">
                                <span>干嘛?</span>
                            </div>
                        </div>
                    </div>
                    <div class="chat_input"><!--输入-->
                        <div class="chat_icon">
                            <a href="#"><span>☺</span></a>
                            <a href="#"><span>☒</span></a>
                            <a href="#"><span>✂</span></a>
                            <a href="#"><span>✎</span></a>
                        </div>
                        <textarea id="area" class="area"></textarea>
                        <button class="input_btn">发送</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $("#btn_id").click(
                function () {
                    $("#border").toggle(500)
                });
            $(".exit").click(
                function () {
                     $("#border").hide(500)
                });
            $(".input_btn").click(
                function () {
                    var value=$(".area").val();
                    // console.log(value);
                    var me_div=$("<div></div>").addClass("me");/*创建自己的消息div*/
                    $(".chat_content").append(me_div);/*把me_div放到chat_content中*/
                    var img_div=$("<div></div>");/*创建放头像的div*/
                    me_div.append(img_div);/*把这个div放到me_div中*/
                    var img =$("<img>").attr({"class":"img","src":"images/2.jpg"})/*创建img标签并添加属性*/
                    img_div.append(img);/*把img添加到img_div中*/
                    var span_div=$("<div></div>").addClass("span_div");
                    var span=$("<span></span>").text(value);
                    span_div.append(span);
                    me_div.append(span_div);
                    $(".area").val("");});

        </script>
    </body>
</html>








